<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen" :style="themeColor()">
		<view class="px-[var(--sidebar-m)] py-[var(--top-m)]">
			<template v-for="(item, index) in info" :key="index">
				<view class="card-template mb-[var(--top-m)]">
					<view class="bg-[var(--temp-bg)] p-[20rpx] rounded-[var(--rounded-mid)] flex">
						<u--image radius="var(--goods-rounded-mid)" width="150rpx" height="150rpx"
							:src="img(item.picUrl ? item.picUrl : '')" model="aspectFill">
							<template #error>
								<u-icon name="photo" color="#999" size="50"></u-icon>
							</template>
						</u--image>
						<view class="flex-1 flex flex-wrap ml-[20rpx] my-[4rpx]">
							<view>
								<view class="text-[26rpx] leading-[40rpx] max-w-[450rpx] truncate">{{ item.titleName || item.spuName }}
								</view>
								<view
									class="max-w-[450rpx] mt-[14rpx] truncate text-[22rpx] text-[var(--text-color-light9)] leading-[28rpx]"
									v-if="item.properties">{{ skuSpecFormat(item.properties) }}</view>
							</view>
							<view class="mt-auto w-full flex justify-between items-center">
								<view class="flex items-baseline  price-font">
									<text class="text-[24rpx] font-500">￥</text>
									<text class="text-[40rpx] font-500">{{
										parseFloat(diyGoods.fen2yuan(item.price)).toFixed(2).split('.')[0]
									}}</text>
									<text class="text-[24rpx] font-500">.{{
										parseFloat(diyGoods.fen2yuan(item.price)).toFixed(2).split('.')[1]
									}}</text>
								</view>
								<text class="font-400 text-[28rpx] text-[#333]">x{{ item.count }}</text>
							</view>
						</view>
					</view>
					<view class="flex items-center mt-[30rpx]">
						<text class="mr-[16rpx] text-[28rpx] pt-[2rpx] ">商品质量</text>
						<u-rate :count="5" v-model="form[index].descriptionScores" active-color="var(--primary-color)"
							:size="'36rpx'" gutter="1"></u-rate>
						<text class="ml-[16rpx] text-[28rpx] pt-[2rpx] text-[var(--primary-color)]">{{ form[index].descriptionScores
							=== 1 ?
							'差评' :
							form[index].descriptionScores === 2 || form[index].descriptionScores === 3 ? '中评' : '好评' }}</text>
					</view>
					<view class="flex items-center mt-[30rpx]">
						<text class="mr-[16rpx] text-[28rpx] pt-[2rpx] ">服务态度</text>
						<u-rate :count="5" v-model="form[index].benefitScores" active-color="var(--primary-color)" :size="'36rpx'"
							gutter="1"></u-rate>
						<text class="ml-[16rpx] text-[28rpx] pt-[2rpx] text-[var(--primary-color)]">{{ form[index].benefitScores
							=== 1 ?
							'差评' :
							form[index].benefitScores === 2 || form[index].benefitScores === 3 ? '中评' : '好评' }}</text>
					</view>
					<textarea class="!text-[26rpx] px-[2rpx] mt-[16rpx] w-[100%] !text-[#333] !leading-[1.5]"
						v-model.trim="form[index].content" placeholder="请在此处输入你的评价"
						placeholderClass="text-[26rpx] text-[var(--text-color-light9)]" maxlength="200" />
					<!-- <view class="text-right text-[24rpx] text-[var(--text-color-light6)]">{{ form[index].content.length >= 200 ? 200 : form[index].content.length }}/200</view> -->
					<upload-img class="mt-[20rpx]" v-model="form[index].picUrls" :max-count="9" :multiple="true" />
				</view>
			</template>
		</view>
		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" zIndex="9999">
			<view class="flex items-center pl-[30rpx] pr-[20rpx] box-border  justify-between w-[100%]">
				<view class="flex items-center" @click="selectCheck">
					<text class="iconfont text-color text-[30rpx] mr-[12rpx] text-[var(--text-color-light9)]"
						:class="{ 'iconxuanze1 text-[var(--primary-color)]': anonymous, 'nc-iconfont nc-icon-yuanquanV6xx': !anonymous }"></text>
					<text class="text-[28rpx] leading-[34rpx]"
						:class="{ 'text-[var(--primary-color)]': anonymous, 'text-[var(--text-color-light6)]': !anonymous }">匿名</text>
				</view>
				<button
					class="!w-[240rpx] !h-[70rpx] text-[26rpx] !m-0 flex-center rounded-full text-white primary-btn-bg remove-border font-500"
					hover-class="none" @click="submit">提交</button>
			</view>
		</u-tabbar>
		<loading-page :loading="loading"></loading-page>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->
	</view>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { getShopOrderDetail } from '@/addon/shop/api/order';
import { setOrderEvaluate } from '@/addon/shop/api/evaluate';
import { onLoad } from '@dcloudio/uni-app';
import { img, redirect, goback } from '@/utils/common';
import uploadImg from '@/addon/shop/pages/evaluate/components/upload-img'
import { useGoods } from '@/addon/shop/hooks/useGoods'
import { skuSpecFormat, timeFormat } from "@/utils/formatting"

const diyGoods = useGoods();
const info = ref<Array<any>>([])
const form = ref<Array<any>>([])
const anonymous = ref(false)
const loading = ref(false)
const order_id = ref('')

const wxPrivacyPopupRef: any = ref(null)

onLoad((option: any) => {
	if (option.order_id) {
		order_id.value = option.order_id
		getShopOrderDetailFn({ id: order_id.value })

		// #ifdef MP
		nextTick(() => {
			if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
		})
		// #endif
	} else {
		let parameter = {
			url: '/addon/shop/pages/order/list',
			param: {
				status: 5
			},
			title: '缺少订单id'
		};
		goback(parameter)
	}
})

const getShopOrderDetailFn = (id: any) => {
	loading.value = true
	getShopOrderDetail(id).then((res: any) => {
		if (res.data.commentStatus) {
			toLink(order_id.value)
			return false
		}
		res.data.items.forEach((el: any) => {
			if (el.status == 0 || el.afterSaleStatus == 1) {
				// 排除存在退款的情况
			} else {
				info.value.push(el);
				// form.value.push({
				// 	order_id: el.order_id,
				// 	order_goods_id: el.order_goods_id,
				// 	goods_id: el.goods_id,
				// 	content: '',
				// 	images: [],
				// 	scores: 5
				// })
				form.value.push({
					anonymous: false,
					orderItemId: el.id,
					descriptionScores: 5,
					benefitScores: 5,
					content: '',
					picUrls: [],
				})
			}

		})
		loading.value = false
	}).catch(() => {
		loading.value = false
	})
}

const selectCheck = () => {
	anonymous.value = anonymous.value ? false : true
}

const submit = async () => {
	if (form.value.some(el => el.content == '')) {
		uni.showToast({ title: '请输入你的评价', icon: 'none' })
		return false
	}
	for (let i = 0; i < form.value.length; i++) {
		let item = form.value[i];
		if (item.content.length > 200) {
			item.content = item.content.substr(0, 200);
		}
	}
	form.value.forEach(v => v.anonymous = anonymous.value)
	loading.value = true
	for (const comment of form.value) {
		await setOrderEvaluate(comment);
	}
	toLink(order_id.value)

	// setOrderEvaluate({ evaluate_array: form.value }).then(res => {
	// 	loading.value = false
	// 	toLink(order_id.value)
	// }).catch(() => {
	// 	loading.value = false
	// })
}

const toLink = (order_id: any) => {
	redirect({ url: '/addon/shop/pages/evaluate/order_evaluate_view', param: { order_id }, mode: 'redirectTo' })
}
</script>
<style lang="scss">
.remove-border {
	&::after {
		border: none;
	}
}
</style>
